import React, { useState, useEffect } from 'react'
import { View, Text, Image, StyleSheet, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native'
import '../../common/global';
import { AsyncStorage } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I from 'react-native-vector-icons/AntDesign';
import {
    useFocusEffect,
} from '@react-navigation/native';

const example = [
    {
        name: '师大张艺兴',
        pic: require('./img/con4.jpg'),
        list: [require('./img/con2.jpg'), require('./img/con2.jpg')],
        content: '我害怕鬼，但鬼未伤我分毫。我不害怕人，但人把我伤的遍体鳞伤。',
        id: '1',
        shenP: '',
        good: 4,
        flag: false,
        isLike: false,
        isComments: false
    },
    {
        name: '诚朴园陈奕迅',
        pic: require('./img/2-0.png'),
        list: [require('./img/2-1.png'), require('./img/2-2.png')],
        content: '人间真实。',
        id: '2',
        shenP: '',
        good: 5,
        flag: false,
        isLike: false,
        isComments: false

    },
    {
        name: '师大林宥嘉',
        pic: require('./img/2-0.png'),
        list: [require('./img/3-1.png')],
        content: '',
        id: '3',
        shenP: '',
        good: 6,
        flag: false,
        isLike: false,
        isComments: false
    }
]

const Pi = ({ navigation }) => {

    const [list, setList] = useState([]);


    const saveData = async (data) => {
        console.log('存储');
        console.log(data);
        data = JSON.stringify(data);
        await AsyncStorage.setItem(
            'dongtai', data
        );
    }

    const getData = async () => {
        let data = await AsyncStorage.getItem('dongtai');
        data = JSON.parse(data);
        if (data == null) {
            data = [];
            return data;
        } else {
            return data;
        }
    }
    //获得保存的评论数组
    const getComments = async () => {
        let data = await AsyncStorage.getItem('dongComments');
        data = JSON.parse(data);
        if (data == null) {
            data = [];
            return data;
        } else {
            return data;
        }
    }
    useFocusEffect(
        React.useCallback(() => {
            async function test() {
                getData().then(async (res) => {
                    console.log(res);
                    if (res.length == 0) {
                        console.log('11');
                        setList([...example])
                        await saveData(example);
                    } else {
                        //此处进行点赞数最高和评论的拼接
                        await getComments().then(async (r) => {

                            console.log('展示页获得评论数据', r);
                            res.forEach((item) => {
                                let help = [];
                                for (let i = 0; i < r.length; i++) {
                                    if (item.id == r[i].id) {
                                        help = r[i].list;
                                        console.log('获得对应的评论', r[i]);
                                    }
                                }
                                if(help.length!=0){
                                   
                                    for (let j = 0; j < help.length - 1; j++) {
                                        if (help[j].good > help[j + 1].good) {
                                            var temp = help[j];
                                            help[j] = help[j + 1];
                                            help[j + 1] = temp;
                                        }
                                    }
                                   

                                    if(help[help.length-1].good!=0){
                                        item.shenP = help[help.length-1].shenP;
                                    }

                                    if(help[help.length-1].good==0){
                                        item.shenP = '';
                                    }
                                   
                                }
                               
                            })
                           
                            setList([...res]);
                            await saveData([...res]);

                        })

                    }
                })
            }
            test();
            let a = setTimeout(() => {
                test();
                clearTimeout(a);
            }, 10)

            let b = setTimeout(() => {
                test();
                clearTimeout(b);
            }, 100)
            return () => {

            };
        }, []))

    return (
        <View style={styles.container1}>
            <ScrollView id="container" style={styles.container}>
                {
                    list.map((item, key) => {
                        return (
                            <View key={key} id={item.id} style={{ marginTop: 15, backgroundColor: 'white' }}>
                                <View style={styles.part1} >
                                    <Image style={styles.avatar} resizeMode="stretch" source={item.pic} />
                                    <Text id="name" style={styles.name}>{item.name}</Text>
                                </View>
                                <View style={styles.part2}>
                                    <Text id="article" style={styles.article}>{item.content}</Text>
                                </View>
                                <View style={styles.part3}>
                                    {
                                        item.list.map((index, key) => {
                                            if (item.flag == true) {
                                                return <Image id="conImg" style={styles.conImg} source={{ uri: index }} key={key} />
                                            } else {
                                                return <Image id="conImg" style={styles.conImg} source={index} key={key} />
                                            }

                                        })
                                    }
                                </View>
                                {/* 评论 */}
                                <View style={styles.part4}>
                                    <View style={styles.part41}>
                                        <View style={styles.bestCom}>
                                            {
                                                !item.shenP ? null : <Icon name="baby-face-outline" style={styles.face} size={30} />
                                            }

                                            {
                                                !item.shenP ? <Text style={{ fontSize: 17, color: '#fff', marginLeft: 2 }}>召唤神评</Text> : <Text style={{ fontSize: 17, color: '#fff', marginLeft: 2 }}>神评</Text>
                                            }

                                        </View>


                                    </View>
                                    {
                                        !item.shenP ? null : <View style={styles.part42}>
                                            <Text id="article" style={styles.article1}>{item.shenP}</Text>
                                        </View>
                                    }

                                </View>
                                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
                                    <Icon name="comment-text-outline" style={{ color: 'black' }} size={36}
                                        onPress={() => { navigation.navigate('comments', { id: item.id }) }} />
                                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: 14, marginRight: 20, marginBottom: 8 }}>
                                        <TouchableOpacity onPress={async () => {
                                            let help = [...list];
                                            help.forEach((v) => {
                                                if (v.id == item.id) {
                                                    if (v.isLike == true) {
                                                        v.good--;
                                                    } else {
                                                        v.good++;
                                                    }
                                                    v.isLike = !v.isLike;

                                                }
                                            })
                                            setList(help);
                                            await saveData(list);
                                        }}>
                                            <Icon name={item.isLike ? 'arrow-up-thick' : 'arrow-up-bold-outline'} size={36} />
                                        </TouchableOpacity>

                                        <Text style={{ fontSize: 18, marginLeft: 6, color: 'black' }}>{item.good}</Text>
                                    </View>
                                </View>

                            </View>

                        )
                    })
                }
            </ScrollView>
            <View style={styles.contentFindView}>
                <TouchableOpacity
                    style={{ height: 50, width: 50, position: 'absolute' }}
                    onPress={() => {
                        navigation.navigate('fabiao')
                    }}>
                    <I name='pluscircle' style={{ fontSize: 50, color: 'rgb(60,148,205)' }} />
                </TouchableOpacity>
            </View>

        </View>
    )

}

const styles = StyleSheet.create({
    container1: {
        flex: 1,
    },
    contentFindView: {
        height: 50,
        width: 50,
        position: 'absolute',
        left: 390,
        top: 650,
        opacity: 0.5
    },
    bestCom: {
        width: 80,
        backgroundColor: '#FF7A87',
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 20,
        paddingLeft: 3,
        marginBottom: 10
    },
    face: {
        color: '#FDE702'
    },
    container: {
        flex: 1,
        margin: 0,
        padding: 0,
        backgroundColor: '#eee',
    },
    part1: {
        paddingLeft: 20,
        paddingTop: 16,
        paddingBottom: 8,
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 10
    },
    part2: {
        paddingTop: 8,
        paddingLeft: 20,
        paddingBottom: 8,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    part3: {
        width: '90%',
        paddingLeft: 20,
        paddingTop: 8,
        paddingBottom: 8,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        backgroundColor: '#fff'
    },
    part4: {
        width: '90%',
        backgroundColor: '#F5F5F7',
        marginTop: 20,
        marginBottom: 20,
        padding: 10,
        // borderTopRightRadius:20,
        // borderTopLeftRadius:20,
        marginLeft: '5%',
        borderRadius: 10
    },
    part41: {
        // backgroundColor:'blue',
        flexDirection: 'row',
        alignItems: 'center',
    },
    part42: {
        // backgroundColor:'blue',
        flexDirection: 'row',
        alignItems: 'center',
    },
    part43: {
        width: '100%',
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingTop: 20,
        justifyContent: 'center'
    },
    arrowup: {
        color: '#3C94CD',
        marginLeft: 10
    },
    arrowdown: {
        color: '#3C94CD',
        marginLeft: 6
    },
    avatar: {
        // backgroundColor:'blue', 
        width: 40,
        height: 40,
        borderRadius: 200
    },
    name: {
        marginLeft: ptd(12),
        fontSize: 19,
        color: '#5A5B5F'
    },
    article: {
        fontSize: 20,
        width: '95%'
    },
    article1: {
        fontSize: 18,
        width: '100%'
    },
    conImg: {
        //backgroundColor:'yellow',
        width: 145,
        height: 145,
        borderRadius: 8,
        marginRight: 6,
        marginBottom: 3,
        borderColor: '#ddd',
        borderWidth: 1
    },
    txtBox: {
        width: '100%',
        height: 40,
        marginBottom: 5,
        backgroundColor: '#F5F5F7',
        flexDirection: 'row'
    },
    txtInput: {
        width: '85%',
        backgroundColor: '#fff',
        borderRadius: 20,
        marginLeft: 5,
    },
    txtBtn: {
        width: 45,
        height: 30,
        backgroundColor: 'skyblue',
        marginTop: 5,
        marginLeft: 5,
        borderRadius: 10,
    },
    btnTxt: {
        textAlign: "center",
        lineHeight: 30,
        color: '#fff',
        fontSize: 18
    }
})
export default Pi

